import React, { Component } from 'react'
import withMouse from './hoc'
// 导入样式
// import './cursor.css'

import MouseRenderProps from './renderProps'

// 没有封装
class Index extends Component {
  // 设置响应数据
  state = {
    x: 0,
    y: 0,
  }

  // 鼠标移动的事件处理函数
  handlerMove = (e) => {
    // console.log(e)
    this.setState({
      x: e.x,
      y: e.y,
    })
  }

  componentDidMount() {
    window.addEventListener('mousemove', this.handlerMove)
  }

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handlerMove)
  }

  render() {
    return (
      <div>
        <h1>组件封装</h1>
        <p>
          鼠标位置：{this.state.x}:{this.state.y}
        </p>
      </div>
    )
  }
}

// 测试renderProps/hoc模式
const Fn1 = ({ x, y, a }) => {
  return (
    <div>
      <p>{a}</p>
      <h1 style={{ color: 'yellow' }}>
        鼠标：{x}:{y}
      </h1>
    </div>
  )
}
const NewMouse = withMouse(Fn1)
class Test extends Component {
  render() {
    return (
      <div>
        <MouseRenderProps
          render={({ x, y }) => {
            // console.log('复用的数据：', state)
            return (
              <div>
                <h1 style={{ color: 'blue' }}>
                  鼠标位置：{x}:{y}
                </h1>
              </div>
            )
          }}
        />

        <NewMouse a={1} />

        {/* <MouseRenderProps
          render={({ x, y }) => {
            // console.log('复用的数据：', state)
            return (
              <div>
                <h2 style={{ color: 'orange', fontSize: '24px' }}>
                  鼠标位置：{x}:{y}
                </h2>
              </div>
            )
          }}
        /> */}
      </div>
    )
  }
}

export default Test
